<template>
	<view class="container">
		<navbar :title='title'></navbar>
		<view v-if='loadingPage'>
			<load-page></load-page>
		</view>
		<view class="wrap" v-else>
			<template v-if='list.length > 0'>
				<view class="comment-wrap">
					<view class="comment-item-con" v-for='(item,index) in list' :key="index">
						<comment-item :item='item'></comment-item>
					</view>
				</view>
				<loading :loadEnd='loadEnd'></loading>
			</template>
			<no-data noDataImg='/static/no-search.png' text='竟然一条评价都没有' v-else></no-data>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	import commentItem from '../../../components/comment-item/comment-item.vue';
	export default {
		components:{
			commentItem,
		},
		data() {
			return {
				title:`全部(0)`,
				goodsId:'',
				list: [],
				page: 1,
				totalPage: '',
				loadEnd: false,
				loadingPage: true,
				showData:false,
			};
		},
		onLoad(option) {
			this.goodsId = option.goods_id ? option.goods_id : '';
			this.getList()
		},
		onPullDownRefresh() {
			
		},
		onReachBottom() {
			let that = this;
			if (that.page < that.totalPage) {
				this.loadEnd = false;
				that.page++;
				that.getList()
			} else {
				return;
			}
		},
		methods:{
			getList(){
				app.globalRequest({
					api: app.getApi().goods.goodsComment,
					data:{
						goods_id: this.goodsId,
						page: this.page,
						limits: 15
					}
				}).then(res => {
					this.loadingPage = false;
					if (res.code == 0) {
						res.data.data.forEach(v=>{
							if(v.picture.length > 0){
								v.picture = v.picture.split('|')
							}
						})
						this.list = this.list.concat(res.data.data);
						this.totalPage = res.data.last_page;
						this.title = `全部(${res.data.total})`;
						if (this.totalPage == this.page) {
							this.loadEnd = true;
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wrap{
		padding:24rpx 0 100rpx;
	}
	.comment-wrap{
		margin:0 24rpx;
		.comment-item-con{
			padding:24rpx;
			background: #fff;
			border-radius: 8rpx;
			margin-bottom: 24rpx;
		}
	}

</style>
